<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:body>
        <ui:composition template="templates/template.xhtml">
            <ui:define name="title">Gestion des catégories - Administration ShopEasy</ui:define> 
            <ui:define name="content">
                <section class="wrapper style2">
                    <div class="container">
                        <div id="content">
                            <h:form>
                                <p:growl id="messages" autoUpdate="true" />

                                <p:dataTable id="liste" var="cat" value="#{listeCategories.categories}" editable="true" editMode="row" sortMode="multiple" 
                                             widgetVar="listeTriee" emptyMessage="Aucun résultats" filteredValue="#{listeCategories.categoriesTriees}" >                                   
                                    <p:ajax event="rowEdit" listener="#{listeCategories.modifierCategorie}" update="liste" />

                                    <f:facet name="header">
                                        Liste des catégories de produit
                                        <p:outputPanel>
                                            <p:inputText id="globalFilter" onkeyup="PF('listeTriee').filter()" style="text-align:center;width:200px" placeholder="Recherche"/>
                                        </p:outputPanel>
                                    </f:facet>                                    

                                    <p:column headerText="Id" sortBy="#{cat.id}" filterBy="#{cat.id}" filterStyle="display:none">                                        
                                        <h:outputText value="#{cat.id}" />
                                    </p:column>

                                    <p:column headerText="Libelle" sortBy="#{cat.libelle}" filterBy="#{cat.libelle}" filterStyle="display:none">              
                                        <p:cellEditor>
                                            <f:facet name="output"><h:outputText value="#{cat.libelle}" /></f:facet>
                                            <f:facet name="input"><p:inputText id="libelle" value="#{cat.libelle}" style="width:100%" required="true" requiredMessage="Le champs libelle ne peut pas être vide." /></f:facet>
                                        </p:cellEditor>
                                    </p:column>

                                    <p:column headerText="Description" sortBy="#{cat.description}" filterBy="#{cat.description}" filterStyle="display:none">
                                        <p:cellEditor>
                                            <f:facet name="output"><h:outputText value="#{cat.description}" /></f:facet>
                                            <f:facet name="input"><p:inputTextarea id="description" value="#{cat.description}" style="width:100%" required="true" requiredMessage="Le champs description ne peut pas être vide." /></f:facet>
                                        </p:cellEditor>
                                    </p:column>

                                    <p:column headerText="Modifier" style="width: 70px;" styleClass="ui-icon-center" >
                                        <p:rowEditor />                                       
                                    </p:column>

                                    <p:column headerText="Supprimer" style="width:100px;text-align: center">
                                        <p:commandButton icon="ui-icon-trash" title="Supprimer" actionListener="#{listeCategories.supprimerCategorie(cat.id)}" update="liste" process="@this" >
                                            <p:confirm header="Confirmation" message="Voulez-vous supprimer cette cattegorie ?" icon="ui-icon-alert" />
                                        </p:commandButton>  
                                    </p:column>                                    
                                </p:dataTable>

                                <p:confirmDialog global="true" showEffect="clip">
                                    <p:commandButton value="Oui" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
                                    <p:commandButton value="Non" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
                                </p:confirmDialog>
                            </h:form>
                        </div>
                    </div>
                </section>                
            </ui:define>
        </ui:composition>
    </h:body>
</html>